@import "~assets/styles/_bootstrap";

html, body {
	height: 100%;
}

.company-medal-page {
  width: 100%;
  height: 100%;

  .company {
    position: absolute;
    top: 0;
    padding-top: rem(123px);
    width: 100%;
    height: 100%;

    .mask {
      transition: all .5s;

      &:before {
        position: fixed;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        content: ' ';
        z-index: 999;
        background: rgba(0, 0, 0, .3);
      }
    }

    &:before {
      position: absolute;
      display: block;
      top: rem(55px);
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 100%;
      height: rem(68px);
      content: ' ';
      background: url('~assets/images/comBg.jpg') no-repeat;
      background-size: 100% auto;
    }

    .img-list {
      padding: rem(10px);

      &:after {
        display: block;
        content: ' ';
        clear: both;
      }

      .list {
        display: inline-block;
        float: left;
        margin: rem(6.5px);
        width: rem(75px);
        height: rem(70px);
        border: none;

        > img {
          padding: rem(5px);
          display: inline-block;
          width: 100%;
          height: 100%;
          box-shadow: 0 0 10px #ccc;
          background: rgba(255, 255, 255, .8);
          transition: all .5s;

          &.active {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: rem(300px);
            height: rem(230px);
            z-index: 1000;
          }


        }

      }


    }

  }

}